<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        
        //创建XML对象
        var xhr = new XMLHttpRequest();
        //请求url
        xhr.open('get', 'abc.txt', true)
        //发送
        xhr.send()
        //前台请求状态事件
        xhr.onreadystatechange = function () {
            if (xhr.status == 200) {
                console.log(xhr.responseText);
            } else {
                console.log(xhr.status);
            }
        }
        

        //简单封装
        //url:哪个文件 fnSucc:读取成功调用
        /*
        function ajax(url, fnSucc, fnFaild) {

            //创建ajax对象
            var oAjax = null;
            if (window.XMLHttpRequest) {
                oAjax = new XMLHttpRequest();
            } else {
                oAjax = new ActiveXObject('Microsoft.XMLHTTP')//针对IE兼容写法
            }

            //连接服务器
            oAjax.open('GET', url, true)

            //发送请求
            oAjax.send();

            //接收服务器的返回
            oAjax.onreadystatechange = function () {
                if (oAjax.readyState == 4) {//完成
                    if (oAjax.status == 200) {//成功回调
                        fnSucc(oAjax.responseText)
                    } else {
                        if (fnFaild) {//失败回调
                            fnFaild(oAjax.status)
                        }
                    }
                }
            }
        }

        //调用ajax('url地址',成功方法，失败方法)
        ajax('abc.txt', function (data) {
            console.log(data);//data后台数据
        }, function (status) {
            console.log(status);//status失败状态
        })
    */
        // onreadystatechenge事件:
        //     http请求状态码:0 初始状态(ajax对象创建完成) 1 已经接上(open方法正确执行) 3 接收完成 头部 url+get  4接收完成 身子 post


        //服务器返回http响应码
        // 200 <= xhr.status < 300 || xhr.status=304 代表成功
        //if(xhr.status>=200&&xhr.status<300||xhr.status==304)

    //     成功的状态码:200--服务器成功返回网页  304--未修改

    //     失败的状态码:404--请求的网页不存在  503--服务器暂时不可用  500--服务器内部错误


    </script>
</body>

</html>